<template>
  <div class="main">
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="title">投票</div>
    <!--<div class="logo">-->
      <!--<img src="@/assets/images/tbkt/msgkk/logo.png" alt>-->
    <!--</div>-->
    <div class="intro-container">
      <scroll-container ref="scrollContainer">
        <div class="intro">
            {{voteItem.introduce}}
        </div>
      </scroll-container>
    </div>
  </div>
</template>
<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";

  export default {
    components: {
      scrollContainer
    },
    methods: {
      getIntro(){
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/material/find?materialId=" +
          this.materialId +
          "&schoolId=" +
          this.$store.state.school.id,
          data => {
            data = JSON.parse(data);
            // console.log(data);
            if (data.head.code === 1) {
              this.voteItem = data.body;
            }
          },
          0,
          function (msg) {
          },
          3000
        );
      }
    },
    created() {
      this.getIntro()
    },
    mounted(){
      let that = this;
      new fObject(
        0,
        0,
        null,
        () => {
          that.$refs.scrollContainer.scrollBy(200);
        },
        () => {
          that.$refs.scrollContainer.scrollBy(-200);
        },
        "0-0",
        null
      );
      this.hs.fObjCommit();
      this.hs.initFocus("0-0");
    },
    data() {
      return {
        scrollY: 0,
        backObjName: "voter-intro",
        hs: this.$store.state.hs,
        voteItem:{},
        materialId: this.$route.params.materialId
      };
    }
  };
</script>
<style lang="less" scoped>
  .main {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    display: flex;
    .title {
      position: absolute;
      top: 77px;
      right: 121px;
      font-size: 60px;
      color: #e8e8e8;
    }
    .logo {
      position: absolute;
      top: 88px;
      left: 120px;
      img {
        width: 260px;
        height: 43px;
      }
    }
    .bg1 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
      z-index: -1;
    }
    .intro-container {
      margin-top: 208px;
      margin-left: 120px;
      width: 1680px;
      height: 608px;
      position: relative;
      .content {
        overflow: hidden;
        .intro {
          display: flex;
          flex-direction: column;
          font-size: 30px;
          line-height: 60px;
        }
      }
    }
  }
</style>
